<template>
  <div class="banner">
    <el-carousel :interval="6000" type="card" :height="bheight">
      <el-carousel-item v-for="(item,index) in imgurl" :key="index">
        <img :src=item.image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>

export default {
    data(){
        return {
        }
    },
    props: {
        imgurl: {
            type: Array
        },
        bheight: {
            type:String
        }
    },
    created () {
        this.$emit("imgUrl",this.imgUrl);
        this.https("Index/getObtainForecastPlanList").then(
          data => {
          });
    },
    methods: {

    }

}
</script>
<style>
    .banner{
        width: 7.91rem;
        margin-top: 0.2rem;
        margin-left: 0.5rem;
    }
    .banner .el-carousel__indicators--outside{
        bottom: 8px;
        position: absolute;
    }
    .banner .el-carousel__item img{
        width: 100%;
        height: 100%;
    }
    .banner .el-carousel__indicators{
        left:45%;
    }
    .banner .el-carousel__indicators--outside button{
        background-color: #ffffff;
    }
    .banner .el-carousel__button{
        border-radius: 50%;
        width: 8px;
        height: 8px;
    }
</style>
<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }
    
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>


